//业主下发清单匹配内部标准清单
<template>
 <div class="e-table">
    <div class="e-tree-table">
        <div class="top">
            <div class="left">
                <div>
                    <el-button size="mini" class="btn-blue" @click="showAlllist" title="预览全部匹配清单">预览全部匹配清单</el-button>
                </div>
            </div>
            <div class="right">
                <div class="right-div1">
                    <el-input
                        placeholder="业主下发清单搜索"
                        size="small"
                        v-model="ownerList.name"
                        @blur="searchOwnerList"
                        style="width:300px"
                    >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="searchOwnerList"></i>
                    </el-input>
                </div>
                <div>
                    <el-input
                        placeholder="内部标准清单搜索"
                        size="small"
                        v-model="ingInternalList.name"
                        @blur="searchIngInternalList"
                        style="width:300px"
                    >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="searchIngInternalList"></i>
                    </el-input>
                </div>
            </div>
        </div>
        <div class ="div1">
            <!-- 业主下发清单 -->
            <el-table key="aa"
                class="table"
                :data="contractListTable"
                border
                style="width: 100%"
                row-key="billId"
                lazy
                :load="onload"
                :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren'
                }"
                @row-click="selectMatchingList"
                :height="tableHeight"
            >
                <el-table-column label="业主下发清单">
                    <el-table-column label="操作" width="70" align='left'>
                    </el-table-column>
                    <el-table-column prop="itemNo" label="细目编号" min-width="200" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="itemName" label="细目名称" min-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="unit" label="计量单位" width="80">
                    </el-table-column>
                </el-table-column>
            </el-table>

            <!-- 已匹配清单 -->
            <el-table key="bb"
                class="table table1"
                :data="matchingListTable"
                border
                style="width: 100%"
            >
                <el-table-column label="已匹配清单">
                    <el-table-column prop="itemNo" label="细目编号" min-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="itemName" label="细目名称" min-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="unit" label="计量单位" width="80">
                    </el-table-column>
                </el-table-column>
            </el-table>

            <!-- 内部标准清单 -->
            <el-table key="cc"
                class="table"
                :data="internalListTable"
                border
                style="width: 100%"
                row-key="billId"
                lazy
                :load="onInternalload"
                :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren'
                }"
            >
                <el-table-column label="内部标准清单">
                    <el-table-column label="操作" width="70" align='left'>
                    </el-table-column>
                    <el-table-column prop="itemNo" label="细目编号" min-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="itemName" label="细目名称" min-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="unit" label="计量单位" width="80">
                    </el-table-column>
                </el-table-column>
            </el-table>
            <!-- <el-table key="dd"
                v-if="ingInternalList.type == 1"
                class="table"
                :data="internalListTable"
                border
                style="width: 100%"
                row-key="billId"
                lazy
                :load="onInternalload"
                :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren'
                }"
            >
                <el-table-column label="内部标准清单">
                    <template slot="header" slot-scope="{row}">
                        <span style=" margin-right: 10px;">{{row}}内部标准清单:</span>
                        <el-radio-group v-model="ingInternalList.type" @change="toggleDetail">
                            <el-radio :label="0">全部</el-radio>
                            <el-radio :label="1">待匹配</el-radio>
                        </el-radio-group>
                    </template>
                    <el-table-column label="操作" width="70" align='left'>
                    </el-table-column>
                    <el-table-column prop="itemNo" label="细目编号" min-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="itemName" label="细目名称" min-width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="unit" label="计量单位" width="80">
                    </el-table-column>
                </el-table-column>
            </el-table> -->
        </div>

    </div>
 </div>
</template>

<script>
import request from '@/api/landlordContract/ownerIssueLise.js'
import fn from '@/utils/checkEmpty.js'
import { vueDom, debounce } from '@/utils/common.js'
export default {
    components: {},
    props: {},
    data () {
        return {
            veidoo: true,
            tableHeight: 0,
            billid: '1525402457467322370', //测试暂时写死
            contractListTable: [], //业主下发清单
            internalListTable: [], //内部标准清单
            matchingListTable: [], //已匹配清单
            ownerList: { //业主下发清单参数
                'billId': '1525402457467322370',
                'name': '',
                'parentId': '0' //首级默认为0,下级传本级id
            },
            ingInternalList: { //内部标准清单参数
                'name': '',
                'parentId': '0',
                'type': 0       //0全部，1待匹配
            }
        }
    },
    watch: {
        'ingInternalList.type': function () {
            console.log('ddd', this.ingInternalList.type)
            this.getMatchingInternalList()
        }
    },
    computed: {},
    created () {
        this.getMatchingOwnerList()
        this.getMatchingInternalList()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        //业主下发清单
        getMatchingOwnerList () {
            request.matchingOwnerList(this.ownerList).then(res=>{
                res.forEach(item=>{
                    item.hasChildren = item.isDetailed ? false : true  //是否子级  0不是 1是
                    item.children = []
                })
                this.contractListTable = res
            })
        },
        //内部标准清单
        getMatchingInternalList () {
            //内部标准清单
            request.matchingInternalList(this.ingInternalList).then(res=>{
                res.forEach(item=>{
                    item.hasChildren = item.isDetailed ? false : true  //是否子级  0不是 1是
                    item.children = []
                })
                this.internalListTable = res
            })
        },
        //获取业主下发清单子级的数据
        async getChildrenInfo (thisLevelId) {
            this.ownerList.parentId = thisLevelId
            let result = await request.matchingOwnerList(this.ownerList)
            result.forEach(item=>{
                item.hasChildren = item.isDetailed ? false : true  //是否子级 0不是 1 是
                item.children = []
            })
            return result
        },
        //懒加载业主下发清单数据
        async onload (row, treeNode, resolve) {
            let result
            if(row.children.length > 0) {
                result = row.children
            }else{
                //如果不是子级，就从接口取
                if (!row.isDetailed) {
                    result = await this.getChildrenInfo(row.thisLevelId) //本级id
                }else {
                    //是最子级，则初始为空，合并新增数据，并设为非最子级
                    result = []
                }
            }
            resolve(result)
        },
        //获取内部标准清单子级的数据
        async getInternalChildren (thisLevelId) {
            this.ingInternalList.parentId = thisLevelId
            let result = await request.matchingInternalList(this.ingInternalList)
            result.forEach(item=>{
                item.hasChildren = item.isDetailed ? false : true  //是否子级 0不是 1 是
                item.children = []
            })
            return result
        },
        //懒加载内部标准清单数据
        async onInternalload (row, treeNode, resolve) {
            let result
            if(row.children.length > 0) {
                result = row.children
            }else{
                //如果不是子级，就从接口取
                if (!row.isDetailed) {
                    result = await this.getInternalChildren(row.thisLevelId) //本级id
                }else {
                    //是最子级，则初始为空，合并新增数据，并设为非最子级
                    result = []
                }
            }
            resolve(result)
        },
        //切换内部标准清单
        toggleDetail () {
            console.log('ddd', this.ingInternalList.type)
            this.getMatchingInternalList()
        },
        //获取匹配清单
        selectMatchingList (row) {
            this.matchingListTable = []
            request.selectMatching({ distributionListId: row.billId }).then(res=>{
                if(!fn.checkEmpty(res)) {
                    this.matchingListTable.push(res)
                }else{
                    this.matchingListTable = []
                }
            })
        },
        //预览全部匹配清单
        showAlllist () {

        },
        //业主下发清单搜索
        searchOwnerList () {
            // this.getMatchingOwnerList()
        },
        //内部标准清单搜索
        searchIngInternalList () {
            // this.getMatchingInternalList()
        },
    },

}
</script>
<style lang="scss" scoped>
.e-table {
    min-height: 97.3vh;
}
.e-tree-table .div1{
    display: flex;
}
.table1{
    margin-left: 5px;
    margin-right: 5px;
}
</style>